<template>
  <div>
    <breadcrumb></breadcrumb>
    <div class="header">
      <div class="searchBox">
        <el-input placeholder="请输入内容" class="searchInput" v-model="searchValue" @keyup.enter.native="getList1()"
          @input="changeSearchValue">
          <el-select v-model="selectValue" slot="prepend" placeholder="请选择" class="selectType">
            <el-option v-for="item in searchArr" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-input>
        <el-button type="primary" size="small" icon="el-icon-search" style="margin-left: 10px"
          @click="getList1()">搜索</el-button>
        <div class="unfold" @click="changeUnfold()">
          {{ isUnfold ? "收起" : "展开" }}
          <i class="el-icon-arrow-up" style="margin-left: 4px" :class="{ UnfoldActive: !isUnfold }"></i>
        </div>
      </div>
      <div class="unfold_area" v-show="isUnfold == true">
        <el-row>
          <el-col :span="8">

            <div class="inputBox">
              <div class="label">订单来源</div>
              <el-select placeholder="请选择" class="orderSelector" v-model="orderSourceType">
                <el-option v-for="item in orderSourceSelect" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="inputBox">
              <div class="label">类别</div>
              <el-select placeholder="请选择" class="orderSelector" v-model="orderType">
                <el-option v-for="item in typeArr" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="inputBox">
              <div class="label">订单状态</div>
              <el-select placeholder="请选择" class="orderSelector" v-model="orderStatus">
                <el-option v-for="item in orderStatusSelect" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="inputBox">
              <div class="label">下单人</div>
              <input type="text" class="input" placeholder="请输入关键字" v-model="customerName" @keyup.enter="getList1()" />
            </div>
          </el-col>
          <el-col :span="8">
            <div class="inputBox">
              <div class="label">接单人</div>
              <input type="text" class="input" placeholder="请输入关键字" v-model="fleetName" @keyup.enter="getList1()" />
            </div>
          </el-col>
          <el-col :span="8">
            <div class="inputBox">
              <div class="label">运营商</div>
              <input type="text" class="input" placeholder="请输入关键字" v-model="supplierName" @keyup.enter="getList1()" />
            </div>
          </el-col>
          <el-col :span="8">
            <div class="inputBox">
              <div class="label">用车时间</div>
              <el-date-picker size="small" v-model="useCarTime" type="datetimerange" :picker-options="pickerOptions"
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
                value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </div>
          </el-col>
          <!-- <el-col :span="8">
            <div class="inputBox" style="display: flex">
              <div class="label">创建时间</div>
              <el-date-picker v-model="createTime" value-format="yyyy-MM-dd HH:mm" class="datePicker" type="datetime"
                placeholder="选择日期时间" default-time="12:00:00">
              </el-date-picker>
         
            </div>
          </el-col> -->
          <el-col :span="8">
            <el-button type="primary" size="small" icon="el-icon-search" style="margin-left: 24px"
              @click="getList1()">搜索</el-button>
            <el-button type="plain" size="small" icon="el-icon-refresh-right" @click="clearUp()">清空</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="main">
      <div class="list">
        <el-table :data="records" style="width: 100%" @selection-change="handleSelectionChange" header-align="center"
          ref="table">
          <el-table-column align="center" prop="SerialNumber" width="60" label="序号">
            <template slot-scope="scope">
              {{ scope.$index + 1 + Number(pageSize) * (pageCurrent - 1) }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="orderStatusValue" label="订单状态" width="140">
            <template slot-scope="scope">
              <!-- NEW( code: 1， info:"新订单") -->
              <div class="tagBox">
                <div class="tag gery" v-if="scope.row.orderStatus == 1">
                  <div class="dian"></div>
                  <div class="text">未发布</div>
                </div>
                <!-- HANG_UP( code: 2， info:"挂起")，PAYING( code: 3， info:"等待付款")PAID( code: 4，info:"已付款") -->
                <div class="tag waitDispatch" v-if="scope.row.orderStatus == 4 ||
                  scope.row.orderStatus == 2 ||
                  scope.row.orderStatus == 3
                  ">
                  <div class="dian"></div>
                  <div class="text">未起运</div>
                </div>
                <div class="tag dispatched" v-if="scope.row.orderStatus == 5 || scope.row.orderStatus == 6">
                  <!--  SHIPMENTING( code: 5,SHIPMENTED( code: 6info:"已发货")-->
                  <div class="dian"></div>
                  <div class="text">运输中</div>
                </div>
                <div class="tag dispatched" v-if="scope.row.orderStatus == 7">
                  <div class="dian"></div>
                  <!-- WAITING_PAY( code: 7，info:"等待到付") -->
                  <div class="text">已送达</div>
                </div>
                <div class="tag dispatched" v-if="scope.row.orderStatus == 8 || scope.row.orderStatus == 9">
                  <div class="dian"></div>
                  <!-- TO_SIGN( code: 8，info:"待签收")，WAITING_RECEIPT( code: 9，info:"等待签收回单”) -->
                  <div class="text">待签收</div>
                </div>
                <div class="tag complete" v-if="scope.row.orderStatus == 11 || scope.row.orderStatus == 10
                  ">
                  <div class="dian"></div>
                  <!-- COMPLETED( code: 11， info:"已完成") code:10 已签收 -->
                  <div class="text">已完成</div>
                </div>
                <div class="tag Canceled" v-if="scope.row.orderStatus == 12">
                  <!-- CANCEL( code: 12， info:"订单取消"]; -->
                  <div class="dian"></div>
                  <div class="text">已取消</div>
                </div>
                <div class="tag dispatched" v-if="scope.row.orderStatus == 99">
                  <!-- CANCEL( code: 99， info:"指派司机建单"]; -->
                  <div class="dian"></div>
                  <div class="text">指派司机建单</div>
                </div>
              </div>

            </template>
          </el-table-column>
          <el-table-column align="center" prop="orderNo" label="订单编号" width="200"></el-table-column>
          <el-table-column align="center" prop="orderSourceTypeValue" label="来源"></el-table-column>
          <el-table-column align="center" prop="orderTypeValue" label="类别"></el-table-column>
          <el-table-column align="center" prop="customerName" label="下单人"></el-table-column>
          <el-table-column align="center" prop="fleetName" label="接单人">
            <template slot-scope="scope">
              <div>{{ scope.row.fleetName == null ? '--.--' : scope.row.fleetName }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="supplierName" label="运营商"></el-table-column>


          <el-table-column align="center" prop="useCarTime" label="用车时间" sortable>
            <template slot-scope="scope">
              <div>{{ scope.row.useCarTime == null ? '--.--' : scope.row.useCarTime }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="96">
            <template slot-scope="scope">
              <div>
                <el-button type="text" size="small" v-if="permissions.orderDetail.perms != null" @click="
                  $router.push(
                    'MatchOrders/details/' +
                    scope.row.orderId +
                    '/' +
                    scope.row.orderStatus
                  )
                  ">详情</el-button>
                <el-button type="text" size="small" v-if="scope.row.transportStatus <= 6 &&
                  scope.row.orderStatus != 12 & permissions.cancelOrder.perms != null
                  " @click="cancelOrder(scope.row.orderId)">取消</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paginationBox">
        <el-pagination @current-change="changePages($event)" class="pagination" background layout="slot,prev, pager, next"
          :current-page.sync="pageCurrent" :total="data.total * 1" :page-size="data.size * 1" :pager-count="5">
          <template slot>
            <span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">
              共{{ data.total }}条,每页{{ data.size }}条
            </span>
          </template>
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb";
import httpApi from "@/http";
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      searchValue: "orderNo", //
      orderSourceType: "", //订单来源
      orderType: "", //订单类型
      orderStatus: "", //订单状态
      customerName: "", //下单人
      supplierName: "",
      fleetName: "", //接单人
      useCarTime: [], //用车时间
      createTime: "", //创建日期
      searchArr: [
        { label: "下单人", value: "customerName" },
        { label: "接单人", value: "fleetName" },
        // { label: "用车时间", value: "useCarTime" },
        { label: "运营商", value: "supplierName" },
        { label: "订单编号", value: "orderNo" },
      ],
      /* NORMAL( code: 1， info:"拉货/搬家")B_ACCEPT( code: 2， info:"承运订单")C_ACCEPTCinfo:"C端承运订单")code: 3SUPPLIERCcode:
       4 info:"供应商订单")MATCHMAKING( code: 5， info:"撮合订单"); */
      typeArr: [
        { label: "拉货/搬家", value: "1" },
        { label: "承运订单", value: "2" },
        { label: "C端承运订单", value: "3" },
        { label: "供应商订单", value: "4" },
        { label: "撮合订单", value: "5" },
      ],

      isUnfold: false,
      orderSourceSelect: [
        {
          value: 1,
          label: "同城货运",
        },
        {
          value: 2,
          label: "智慧车工坊",
        },
        {
          value: 3,
          label: "网络货运",
        },
        {
          value: 4,
          label: "快狗",
        },
      ],
      orderStatusSelect: [
        {
          value: "1,2,3,4",
          label: "未接单",
        },
        {
          value: "5,6",
          label: "运输中",
        },
        {
          value: "7",
          label: "已送达",
        },
        {
          value: "8,9",
          label: "待签收",
        },
        {
          value: "11",
          label: "已完成",
        },
        {
          value: "12",
          label: "已取消",
        },
        {
          value: "13",
          label: "待调度",
        },
        {
          value: "20",
          label: "已超时",
        },
        {
          value: "99",
          label: "指派司机建单",
        }
      ],
      selectValue: "orderNo",
      searchValue: "",
      searchFrom: {},
      data: {},
      pageCurrent: 1, //当前页
      pageSize: 15, //每页10条
      records: [],
      permissions: {}
    };
  },
  created() {
    this.permissions = JSON.parse(sessionStorage.getItem('permissions'))
  },
  methods: {
    changeUnfold() {
      this.isUnfold = !this.isUnfold;
    },
    getSerialNumber() {
      // 前端解决序号
      this.records.forEach((item, i) => {
        let num = i + 1 + Number(this.pageSize) + (this.pageCurrent - 1);
        item.SerialNumber = num;
      });
    },

    changeSearchValue(val) {
      this.searchValue = val;
    },
	getList1(){
		this.pageCurrent = 1;
		this.getList();
	},
    getList() {
      if (this.selectValue == "orderNo") {
        // console.log(this.searchValue);
        this.orderNo = this.searchValue;
      }
      this.searchArr.forEach(item => {
        if (this.selectValue == item.value) {
          this[item.value] = this.searchValue
          console.log(this[item.value]);
        }
      })


      let params = {
        orderNo: this.orderNo,
        orderSourceType: this.orderSourceType,
        orderType: this.orderType,
        orderStatusStr: this.orderStatus,
        customerName: this.customerName,
        fleetName: this.fleetName,
        supplierName: this.supplierName,
        // useCarTime: this.useCarTime,
        startTime: this.useCarTime != null ? this.useCarTime[0] : '', //开始时间
        endTime: this.useCarTime != null ? this.useCarTime[1] : '', //结束时间
        // createTime: this.createTime,


        current: this.pageCurrent,
        size: this.pageSize,
      };

      // console.log("参数", params);
      httpApi.orderManagementApi.queryList(params).then((res) => {
        // console.log("查询结果", res);
        if (res.data.code == 200) {
          this.records = res.data.data.records;
          this.data = res.data.data;
          // console.log('records ', this.records);

        } else {
          this.$message.error("查询失败!");
        }
      });
    },
    clearUp() {
      this.orderNo = ""
      this.orderSourceType = ""
      this.orderType = ""
      this.orderStatus = ""
      this.customerName = ""
      this.fleetName = ""
      this.supplierName = ""
      this.searchValue = ""
      this.useCarTime = [];
      this.getList1();

    },
    cancelOrder(orderId) {
      this.$confirm("取消该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = { orderId: orderId };
          // console.log("参数", params);
          httpApi.orderManagementApi.cancelOrder(params).then((res) => {
            // console.log("查询结果", res);
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "取消订单成功!",
              });
              this.getList();
            } else {
              this.$message.error("取消订单失败!");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消订单撤销",
          });
        });
    },
    cleanUp() {
      this.orderNo = "";
      this.orderSourceType = "";
      this.orderStatus = "";
      this.customerName = "";
      this.fleetName = "";
      this.useCarTime = "";
      this.createTime = "";

      this.changePages();
    },
    changePages(val) {
      this.pageCurrent = val.toString()
      //页码变化时
      this.getList(val);
    },
    handleSelectionChange() {
      // 列表数据选择变化时
    },
    // 记录滚动距离
    scrollEvent(res) {
      this.$route.meta.scrollTop = res.target.scrollTop
    },
  },
  mounted() {
    this.getList();
  },
  components: {
    breadcrumb,
  },
  activated() {
    //组件激活时监听表格滚动条位置,
    this.$refs.table.bodyWrapper.addEventListener('scroll', this.scrollEvent, false)
    // 激活设置滚动位置
    this.$refs.table.bodyWrapper.scrollTop = this.$route.meta.scrollTop
  },
  beforeRouteLeave(to, from, next) {
    // 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
    this.$refs.table.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
    next()
  },


};
</script>

<style lang="scss" scoped>
.header {
  background-color: #ffffff;
  align-items: center;
  padding: 0 30px;
  margin-bottom: 8px;

  .searchBox {
    height: 76px;
    display: flex;
    align-items: center;

    ::v-deep .el-input__inner {
      height: 32px;
      line-height: 32px;
      padding: 10px 9px 9px;
    }

    ::v-deep .el-input__icon {
      line-height: 0;
    }

    ::v-deep .el-input-group__append {
      border: none;
    }

    .selectType {
      width: 90px;
      height: 32px;
      color: #262626;
      font-size: 12px;
      background-color: #ffffff;

      ::v-deep .el-input-group__prepend {
        height: 32px !important;
      }

      ::v-deep .el-input__inner {
        height: 32px;
        line-height: 30px;

        padding: 10px 9px 9px;
        //border-bottom: 1px solid #f0f0f0;
      }

      ::v-deep .el-input__inner {
        border: 1px solid #f0f0f0;
      }
    }

    .searchInput {
      width: 480px;
      height: 32px;
    }

    .searchBtn {
      background-color: #1890ff;
      color: #ffffff;
      font-size: 12px;
      width: 80px;
      height: 32px;
      border-radius: 0;
    }

    .unfold {
      color: #1890ff;
      font-size: 12px;
      margin-left: 19px;
      cursor: pointer;

      &:hover {
        opacity: 0.8;
        transition: 0.2s;
      }

      .UnfoldActive {
        transition: 0.3s;
        transform: rotateZ(180deg);
      }

      .el-icon-arrow-right {
        color: #1890ff;
        font-size: 12px;
      }
    }
  }

  .unfold_area {
    width: 100%;

    .inputBox {
      display: flex;
      margin-bottom: 16px;

      ::v-deep .el-input__inner {
        height: 32px;
        line-height: 32px;
        padding: 0 10px;
      }

      .label {
        font-size: 12px;
        width: 72px;
        line-height: 32px;
        height: 32px;
        text-align: right;
        color: #262626;
        margin-right: 8px;
      }

      .input {
        height: 32px;
        width: 225px;
        border-radius: 4px;
        border: 1px solid #f0f0f0;
        padding: 0 10px;
        color: #606266;
        //color: #c3c3c3;
        font-size: 12px;

        &:focus {
          border: 1px solid #1890ff;
        }
      }

      .orderSelector {
        width: 225px;

        ::v-deep .el-input__icon {
          line-height: 0;
        }
      }

      .datePicker {
        ::v-deep .el-input__icon {
          display: none;
        }
      }
    }
  }
}

.main {
  background-color: #fff;
  // 64 + 76 +14+17 +16+8 =171
  height: calc(100vh - 211px);
  width: 100%;
  padding: 24px 0 0 0;

  .list {
    height: calc(100% - 49px);
    padding: 0 34px;


    .tagBox {
      display: inline-block;
      margin: 0 auto;


      .tag {
        // width: 63px;
        padding: 8px;
        height: 28px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;

        .dian {
          width: 4px;
          height: 4px;
          border-radius: 50%;
          margin-right: 4px;
        }

        // 待派车标签 样式
        &.waitDispatch {
          background-color: #fffce8;
          color: #f9aa0d;

          .dian {
            background-color: #f9aa0d;
          }
        }

        //已派车 和运输中 样式
        &.dispatched {
          background-color: #ecf5fe;
          color: #1890ff;

          .dian {
            background-color: #1890ff;
          }
        }

        //已完成
        &.complete {
          background-color: #ebfef5;
          color: #1acb7a;

          .dian {
            background-color: #1acb7a;
          }
        }

        //已取消
        &.Canceled {
          background-color: #fde8e9;
          color: #f5222d;

          .dian {
            background-color: #f5222d;
          }
        }
      }
    }


    ::v-deep .el-table__body-wrapper {
      height: calc(100vh - 331px) !important;
      overflow-y: scroll;
    }

    // 表头样式
    ::v-deep .el-table__header th {
      background-color: #f0f6fd;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      height: 48px;
      padding: 0;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #595959;
        font-size: 12px;
      }
    }
  }
}



.paginationBox {
  padding: 0 34px;
  width: 100%;
  border: 1px solid #f0f0f0;
  background-color: #fff;
  display: flex;
  height: 48px;
  align-items: center;

  .pagination {
    margin-left: auto;
  }
}
</style>
